<template>
  <a-modal
    :width="800"
    v-model:visible="modalVisible"
    @ok="handleOk"
    :mask-closable="false"
    @cancel="modalVisible = false"
  >
    <template #title> {{ props.title }}</template>
    <div>
      <a-form ref="formRefs" :model="form" auto-label-width>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              field="name"
              :label="!form.pid ? '仓库名称：' : '库区名称：'"
            >
              <a-input
                :style="{ width: '320px' }"
                v-model="form.name"
                placeholder="请输入库区名称..."
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              field="warehouseNumber"
              :label="!form.pid ? '仓库编号：' : '库区编号：'"
            >
              <a-input
                :style="{ width: '320px' }"
                v-model="form.warehouseNumber"
                placeholder="请输入库区编号..."
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              field="warehouseType"
              :label="!form.pid ? '仓库类型：' : '库区类型：'"
            >
              <a-select
                v-model="form.warehouseType"
                :style="{ width: '320px' }"
              >
                <a-option
                  v-for="item in classificationData"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              field="number"
              :label="!form.pid ? '仓库面积：' : '库区面积：'"
            >
              <a-input-number
                :min="1"
                :style="{ width: '320px' }"
                v-model="form.warehouseArea"
                placeholder="请输入库区面积"
                ><template #suffix> 平方 </template></a-input-number
              >
            </a-form-item>
          </a-col> </a-row
        ><a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="name" label="负责人：">
              <a-select
                v-model="form.headId"
                :style="{ width: '320px' }"
                placeholder="请选择负责人..."
                allow-search
              >
                <a-option
                  v-for="item in PersonnelData"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="number" label="启用状态：">
              <a-switch
                v-model="form.state"
                :checked-value="1"
                :unchecked-value="2"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-col :span="23">
          <a-form-item field="number" label="所在位置：">
            <a-textarea
              v-model="form.location"
              placeholder="请输入所在位置..."
              allow-clear
            />
          </a-form-item>
        </a-col>

        <a-col :span="23"
          ><a-form-item field="number" label="备注：">
            <a-textarea
              v-model="form.remark"
              placeholder="请输入备注..."
              allow-clear
            />
          </a-form-item>
        </a-col> </a-form
    ></div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { reactive, computed, watchEffect, onMounted, ref, watch } from 'vue';
  import {
    GetUnitList,
    PostUnit,
  } from '@/api/inventory-management/material-management/index';
  import { getWarehouseType } from '@/api/inventory-management/warehouse-management/warehouse-list/index';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';
  // 获取人员信息数据
  const PersonnelData = ref();
  const Getuserlist = async () => {
    try {
      const res = await GetPersonnelinformation({
        page: 10,
        size: -1,
      });

      PersonnelData.value = res.content.data;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  Getuserlist();
  const getUnitData = ref();
  const getUnitList = async () => {
    const res = await GetUnitList({ page: 1, size: -1, type: 1 });
    getUnitData.value = res.content;
  };

  getUnitList();
  const formRefs = ref();
  const props = withDefaults(
    defineProps<{
      title: string;
      visible: boolean;
      formData: any;
    }>(),
    {
      visible: false,
    }
  );

  // 获取产品分类
  const fieldNames = { value: 'id', label: 'name' };
  const classificationData = ref();
  const ClassificationList = async () => {
    const res = await getWarehouseType({ page: 10, size: -1, type: 1 });
    classificationData.value = res.content;
  };
  ClassificationList();

  let form = ref({
    id: undefined,
    name: '',
    warehouseNumber: '',
    warehouseType: undefined,
    location: '',
    warehouseArea: undefined,
    remark: '',
    headId: undefined,
    state: 1,
    mark: 1,
  });

  const emit = defineEmits(['update:visible', 'addWarehouseForm']);

  const handleOk = () => {
    emit('addWarehouseForm', form.value);
  };

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  watchEffect(() => {
    if (modalVisible.value) {
      // form.name = '';
      form.value = cloneDeep(props.formData);
    }
  });
</script>

<style scoped lang="less"></style>
